<div id="map_canvas" class="google_maps"></div>
<!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>

/*
* Google Maps Initialize
*/

function initialize() {

$this = $("#map_canvas");
$zoom_level = ($this.data("gmap-zoom") || 7);
$data_lat = ($this.data("gmap-lat") || -0.0705254761163916);
$data_lng = ($this.data("gmap-lng") || -76.38155361913323);
$xml_src = ($this.data("gmap-src") || "js/test.xml");

var greyStyleMap = new google.maps.StyledMapType(greyscale_style, {
name: "Greyscale"
}),
monoChromeStyleMap = new google.maps.StyledMapType(monochrome_style, {
name: "Mono Chrome"
}),
metroStyleMap = new google.maps.StyledMapType(metro_style, {
name: "Metro"
}),
nightvisionStyleMap = new google.maps.StyledMapType(nightvision_style, {
name: "Nightvision"
}),
nvisionhstyleMap = new google.maps.StyledMapType(nightvision_highlight_style, {
name: "Nightvision Light"
}),
oPaperStyleMap = new google.maps.StyledMapType(old_paper_style, {
name: "Old Paper"
}),
colorfulStyleMap = new google.maps.StyledMapType(colorful_style, {
name: "Colorful"
}),
monoColorStyleMap = new google.maps.StyledMapType(mono_color_style, {
name: "One Color"
});

function xmlLoadMap() {

var centerLatLng = new google.maps.LatLng($data_lat, $data_lng),
mapOptions = {
zoom: $zoom_level,
center: centerLatLng,
//disableDefaultUI: true,
//mapTypeId : google.maps.MapTypeId.ROADMAP
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.TERRAIN, 'colorful_style', 'greyscale_style',
'monochrome_style', 'metro_style', 'nightvision_style', 'nightvision_highlight_style',
'old_paper_style', 'mono_color_style'
]
}
},

bounds = new google.maps.LatLngBounds(),
infowindow = new google.maps.InfoWindow(),
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

map.mapTypes.set('colorful_style', colorfulStyleMap);
map.mapTypes.set('greyscale_style', greyStyleMap);
map.mapTypes.set('monochrome_style', monoChromeStyleMap);
map.mapTypes.set('metro_style', metroStyleMap);
map.mapTypes.set('nightvision_style', nightvisionStyleMap);
map.mapTypes.set('nightvision_highlight_style', nvisionhstyleMap);
map.mapTypes.set('old_paper_style', oPaperStyleMap);
map.mapTypes.set('mono_color_style', monoColorStyleMap);

//map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
map.setMapTypeId('metro_style');


var url = serviciosRest.urlmaster+"ServicioWebRest/AgenteSupervision.aspx?usu=mvaca@primax.com.ec&callBack=";
var markers=[];
$.getJSON(url + "?",function(result) {
// alert(result.length);
for(var i=0; i<=result.length; i++)
{
var lat = result[i].loc_latitud;
var long = result[i].loc_longitud;
var latlng = new google.maps.LatLng(parseFloat(lat),parseFloat(long));
// alert(latlng);
addMarker(latlng, "A", i, "A", "A", "FFFFFF");
}


function addMarker(latlng, myTitle, index, info, letter, color) {
    var i=49;
    var ic=i+index;
    var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: myTitle,
    //icon: 'http://maps.google.com/mapfiles/kml/pal4/icon'+ic+'.png'
    icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+letter+'|'+color+'|000000'
    });
    google.maps.event.addListener(marker, 'click', function() {
    /*map.setZoom(18);
    map.setCenter(marker.getPosition());*/
    var infowindow = new google.maps.InfoWindow();
    var adress;
    var latlng = new google.maps.LatLng(parseFloat(this.getPosition().lat()),parseFloat(this.getPosition().lng()));
    geocoder.geocode({'latLng':latlng}, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
    if (results[0]) {
    map.setZoom(18);
    map.setCenter(marker.getPosition());
    adress=results[0].formatted_address;
    $('#marker_adress').val(adress);
    infowindow.setContent(info+'<br>'+results[0].formatted_address);
    infowindow.open(map, marker);
    } else {
    alert('No results found');
    }
    } else {
    alert('FALLA DE CONEXION: ' + status);
    //alert('Geocoder failed due to: ' + status);
    }
    });
    //latLong
    $('#marker_lat').val(marker.getPosition().lat());
    $('#marker_lng').val(marker.getPosition().lng());

    });
    markers.push(marker);
}

});	// end get data


} // end xmlLoadMap

// grey
function generate_map_1() {

var mapOptions = {
center: new google.maps.LatLng(41.38155, 2.13752),
zoom: 12,
};
map = new google.maps.Map(document.getElementById('map_canvas1'), mapOptions);

// Setup skin for the map
map.mapTypes.set('greyscale_style', greyStyleMap);
map.setMapTypeId('greyscale_style');

/* map.mapTypes.set('colorful_style', colorfulStyleMap);
map.mapTypes.set('greyscale_style', greyStyleMap);
map.mapTypes.set('monochrome_style', monoChromeStyleMap);
map.mapTypes.set('metro_style', metroStyleMap);
map.mapTypes.set('nightvision_style', nightvisionStyleMap);
map.mapTypes.set('nightvision_highlight_style', nvisionhstyleMap);
map.mapTypes.set('old_paper_style', oPaperStyleMap);
map.mapTypes.set('mono_color_style', monoColorStyleMap);
*/

}

// colorful
function generate_map_2() {

var mapOptions = {
center: new google.maps.LatLng(41.38155, 2.13752),
zoom: 12,
};
map = new google.maps.Map(document.getElementById('map_canvas2'), mapOptions);

// Setup skin for the map
map.mapTypes.set('colorful_style', colorfulStyleMap);
map.setMapTypeId('colorful_style');

}

// colorful
function generate_map_3() {

var mapOptions = {
center: new google.maps.LatLng(41.38155, 2.13752),
zoom: 12,
};
map = new google.maps.Map(document.getElementById('map_canvas3'), mapOptions);

// Setup skin for the map
map.mapTypes.set('nightvision_style', nvisionhstyleMap);
map.setMapTypeId('nightvision_style');

}

// Night Light
function generate_map_4() {

var mapOptions = {
center: new google.maps.LatLng(41.38155, 2.13752),
zoom: 12,
};
map = new google.maps.Map(document.getElementById('map_canvas4'), mapOptions);

// Setup skin for the map
map.mapTypes.set('nightvision_highlight_style', nvisionhstyleMap);
map.setMapTypeId('nightvision_highlight_style');

}

// Paper Style
function generate_map_5() {

var mapOptions = {
center: new google.maps.LatLng(41.38155, 2.13752),
zoom: 12,
};
map = new google.maps.Map(document.getElementById('map_canvas5'), mapOptions);

// Setup skin for the map
map.mapTypes.set('old_paper_style', oPaperStyleMap);
map.setMapTypeId('old_paper_style');

/*
map.mapTypes.set('monochrome_style', monoChromeStyleMap);
map.mapTypes.set('metro_style', metroStyleMap);
map.mapTypes.set('mono_color_style', monoColorStyleMap);
*/

}

// One Color Style
function generate_map_6() {

var mapOptions = {
center: new google.maps.LatLng(41.38155, 2.13752),
zoom: 12,
};
map = new google.maps.Map(document.getElementById('map_canvas6'), mapOptions);

// Setup skin for the map
map.mapTypes.set('mono_color_style', monoColorStyleMap);
map.setMapTypeId('mono_color_style');

}

// Monochrome Style
function generate_map_8() {

var mapOptions = {
center: new google.maps.LatLng(41.38155, 2.13752),
zoom: 12,
};
map = new google.maps.Map(document.getElementById('map_canvas8'), mapOptions);

// Setup skin for the map
map.mapTypes.set('monochrome_style', monoChromeStyleMap);
map.setMapTypeId('monochrome_style');

}

// Metro Style
function generate_map_7() {

var mapOptions = {
center: new google.maps.LatLng(41.38155, 2.13752),
zoom: 12,
};
map = new google.maps.Map(document.getElementById('map_canvas7'), mapOptions);

// Setup skin for the map
map.mapTypes.set('metro_style', metroStyleMap);
map.setMapTypeId('metro_style');

}

xmlLoadMap();
/* generate_map_1();
generate_map_2();
generate_map_3();
generate_map_4();
generate_map_5();
generate_map_6();
generate_map_7();
generate_map_8();*/
}
</script>